<template>
  <!-- 系统邮箱 -->
  <div class="systemEmail-box">
    <el-row :gutter="20" type="flex">
      <el-col :span="24">
        <NewCard title="系统邮箱" :border="false" :isright="true">
          <el-table
            :data="tableData"
            style="width: 100%; margin-bottom:80px"
            @row-click="editEmail"
          >
            <el-table-column prop="email" label="邮箱地址" width="200">
            </el-table-column>
            <el-table-column prop="host" label="域名"></el-table-column>
            <el-table-column prop="port" label="端口"></el-table-column>
            <el-table-column
              prop="pwd"
              label="smtp密码"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="quantitative"
              label="日限量"
            ></el-table-column>
            <el-table-column prop="remark" label="备注" width="200">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template v-slot="{ row }">
                <div @click.stop="() => {}">
                  <el-switch
                    v-model="row.status"
                    active-color="#f87a23"
                    inactive-color="#C0CCDA"
                    active-value="1"
                    inactive-value="0"
                    @change="editSwitch(row)"
                  >
                  </el-switch>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="删除" width="50">
              <template v-slot="{ row }">
                <i
                  class="el-icon-remove-outline"
                  @click.stop="delEmail(row.id)"
                ></i>
              </template>
            </el-table-column>
          </el-table>
          <!-- 添加新邮箱按钮 -->
          <div class="bottomBtn">
            <el-button class="addBtn" v-if="addBtnShow" @click="addShow"
              >+添加新邮箱</el-button
            >
            <!-- 添加新邮箱 -->
            <div class="addForm" v-else>
              <el-form
                ref="form"
                :inline="true"
                :model="addform"
                :rules="rules"
                class="demo-form-inline"
              >
                <el-form-item prop="email">
                  <el-input
                    style="width:200px"
                    v-model.trim="addform.email"
                    placeholder="邮箱地址"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="host">
                  <el-input
                    style="width:150px"
                    v-model.trim="addform.host"
                    placeholder="域名"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="port">
                  <el-input
                    style="width:120px"
                    v-model.trim="addform.port"
                    placeholder="端口"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                  <el-input
                    style="width:150px"
                    v-model.trim="addform.pwd"
                    placeholder="smtp密码"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="quantitative">
                  <el-input
                    style="width:120px"
                    v-model.trim="addform.quantitative"
                    placeholder="日限量"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input
                    style="width:200px"
                    v-model.trim="addform.remark"
                    placeholder="备注"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态" class="switch">
                  <el-switch
                    v-model="addform.status"
                    active-color="#f87a23"
                    active-value="1"
                    inactive-value="0"
                  ></el-switch>
                </el-form-item>
              </el-form>
              <el-button type="primary" class="addSave" @click="addSave" round
                >确认</el-button
              >
              <el-button round @click="cancelSave">取消</el-button>
            </div>
          </div>

          <!-- 分页查询 -->
          <!-- <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageing.pageNum"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="pageing.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageing.total"
                >
                </el-pagination>
                </div> -->
        </NewCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";

import {
  getmailboxListApi,
  addMailboxApi,
  editMailboxApi,
  removeMailboxApi
} from "@/wss/api/base/mailbox.js";
export default {
  name: "systemEmail",
  components: {
    NewCard
  },
  data() {
    return {
      // 分页参数
      // pageing: { pageNum: 1, pageSize: 10 },
      tableData: [], //数据列表
      addform: {
        email: "", //	邮箱地址
        host: "", //	域名
        port: "", //	端口
        pwd: "", //	smtp密码
        quantitative: "", //	日限量
        remark: "", //	备注
        status: "0" //	状态
      },
      addBtnShow: true, // 底部添加按钮显示隐藏
      mode: "", //add 新增  edit编辑
      // total: 0,
      rules: {
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
            message: "请输入正确的邮箱",
            trigger: "blur"
          }
        ],
        host: [{ required: true, message: "请输入域名", trigger: "blur" }],
        port: [
          { required: true, message: "请输入端口", trigger: "blur" },
          { pattern: /^\d+$/, message: "端口必须是整数", trigger: "blur" }
        ],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        quantitative: [
          { pattern: /^\d+$/, message: "日限量必须是整数", trigger: "blur" }
        ]
      },
      active: false
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    // 查询邮箱列表接口
    async getTableData() {
      const { code, rows } = await getmailboxListApi();
      if (code == 200) {
        this.tableData = rows;
      }
    },
    // 新增邮箱接口
    async addEmail() {
      const { code, rows } = await addMailboxApi(this.addform);
      if (code == 200) {
        this.$message.success("新增成功");
        //   刷新父级列表
        await this.getTableData();
      }
    },
    // 编辑邮箱接口
    async editMail(data) {
      const { code, rows } = await editMailboxApi(data);
      if (code == 200) {
        this.$message.success("编辑成功");
        //   刷新父级列表
        await this.getTableData();
      }
    },
    // 点击了新增邮箱
    addShow() {
      this.addBtnShow = false;
      this.mode = "add";
    },
    // 编辑邮箱
    editEmail(row) {
      // 下面的打开
      this.addBtnShow = false;
      this.mode = "edit";
      //   回显
      this.addform = JSON.parse(JSON.stringify(row));
    },

    // 新增确认
    async addSave() {
      // if (this.addform.quantitative && !Number(this.addform.quantitative)) {
      //   this.$message.warning("日限量必须是数字");
      //   return;
      // }
      this.$refs.form.validate(async result => {
        console.log("result:", result);
        if (result) {
          this.active = false;
          // document.querySelector(".addForm").style.lineHeight = "25px";
          //验证成功要执行的逻辑
          if (this.mode === "add") {
            await this.addEmail();
          } else if (this.mode === "edit") {
            await this.editMail(this.addform);
          }
          //   清空
          this.addform = {
            email: "", //	邮箱地址
            host: "", //	域名
            port: "", //	端口
            pwd: "", //	smtp密码
            quantitative: "", //	日限量
            remark: "", //	备注
            status: "0" //	状态
          };
          this.addBtnShow = true;
          // 清空校验
          this.$refs.form.resetFields();
        } else {
          this.active = true;
          // document.querySelector(".addForm").style.lineHeight = "49px";
          // document.querySelector(".switch").style.height = "49px";
        }
      });
    },
    // 取消新增
    cancelSave() {
      // 清空校验
      this.$refs.form.resetFields();
      this.addBtnShow = true;
      this.addform = {
        email: "", //	邮箱地址
        host: "", //	域名
        port: "", //	端口
        pwd: "", //	smtp密码
        quantitative: "", //	日限量
        remark: "", //	备注
        status: "" //	状态
      };
    },
    // 删除邮箱
    async delEmail(id) {
      console.log(id, "id");
      this.$confirm("是否删除该邮箱？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        roundButton: true
      })
        .then(async () => {
          // 调接口
          const { code } = await removeMailboxApi(id);
          if (code == 200) {
            this.$message.success("删除成功");
            //   刷新父级列表
            await this.getTableData();
          }
        })
        .catch(() => {});
    },
    // 改变状态后触发的事件
    editSwitch(row) {
      console.log("改变了状态row:", row);
      this.editMail(row);
    },

    //
    handleSizeChange() {},
    //
    handleCurrentChange() {}
  }
};
</script>

<style lang="scss" scoped>
/* 整体框样式 */
.systemEmail-box {
  height: calc(100% - 60px);
  .el-row {
    height: 100%;
  }
  ::v-deep .el-card__body {
    position: relative;
    height: 100%;
    > div {
      height: calc(100% - 45px);
      overflow-y: auto;
    }
  }

  .el-table {
    .el-input {
      ::v-deep .el-input__inner {
        border: 0;
        padding: 0;
        background-color: transparent;
      }
    }
  }
}

// 添加新版本按钮
.bottomBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  .addBtn {
    width: 100%;
    border: 0;
    border-top: 1px solid #ecedf0;
    background-color: #f8f8f8;
    line-height: 25px;
    color: #606e84;
  }
  // 添加表单
  .addForm {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    border: 0;
    border-top: 1px solid #ecedf0;
    background-color: #f8f8f8;
    padding: 8px 30px;
    line-height: 49px;
    color: #606e84;
    .el-form-item {
      margin-bottom: 0;
      ::v-deep .el-form-item__label {
        float: left;
      }
    }
    .el-select,
    .el-input {
      width: 150px;
    }
    .el-button {
      height: 34px;
      line-height: 34px;
      box-sizing: border-box;
      padding: 0 15px;
    }
    .addSave {
      background-color: #f87a23;
      border-color: #f87a23;
    }
  }
}

.pagination {
  text-align: center;
  padding: 15px 0;
  padding-bottom: 60px;
}
</style>
<style scoped>
::v-deep .versionControl-box .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

/* 表格样式 */
.el-table {
  margin-bottom: 10px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}

::v-deep .el-table td .islight {
  color: #f87a23;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}

::v-deep .el-table__footer-wrapper tbody td {
  background-color: #fff;
  font-weight: bold;
  color: #2e3f5e;
}
</style>
